<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="26">
        <!-- 搜索框 -->
        <el-col :span="3">
          <el-input v-model="value2" placeholder="请输入用户昵称/活动名称" clearable></el-input>
        </el-col>
        <el-col :span="3.3">
          <datepicker ref="datepicker123"/>
        </el-col>
        <el-col  :span="4">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
        </el-col>
        <el-col  :span="4">
          <el-button type="success" @click="find_setting(2)">全部显示</el-button>
        </el-col>
        <el-col  :span="4">
          <el-button type="warning" @click="find_setting(1)">全部不显示</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.user" label="所属用户">所属用户</el-checkbox>
      <el-checkbox v-model="formThead.shop" label="所属机构">所属机构</el-checkbox>
      <el-checkbox v-model="formThead.upload_time" label="上传时间">上传时间</el-checkbox>
      <el-checkbox v-model="formThead.course_subjects" label="课程科目">课程科目</el-checkbox>
      <el-checkbox v-model="formThead.default_like" label="默认点赞人数">默认点赞人数</el-checkbox>
      <!-- <el-checkbox v-model="formThead.on_course" label="上架课程">上架课程</el-checkbox> -->
      <!-- <el-checkbox v-model="formThead.shelves_box" label="上架礼盒">上架礼盒</el-checkbox> -->
      <el-checkbox v-model="formThead.video" label="视频">视频</el-checkbox>
      <el-checkbox v-model="formThead.to_audit" label="待审核" @change="ooo('to_audit')">待审核</el-checkbox>
      <el-checkbox v-model="formThead.not_through" label="不通过" @change="ooo('not_through')">不通过</el-checkbox>
      <el-checkbox v-model="formThead.through" label="通过" @change="ooo('through')">通过</el-checkbox>
    </div>

    <el-table :data="videoList" style="width: 98%;margin: 10px auto 0" border :key="videoList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">
      <el-table-column label="所属用户" align="center" v-if="formThead.user">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.customer_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属机构" align="center" v-if="formThead.shop">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.store_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="上传时间" align="center" v-if="formThead.upload_time">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{newtime(row.create_time)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程科目" align="center" v-if="formThead.course_subjects">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.subjects_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="默认点赞人数" align="center" v-if="formThead.default_like">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.auto_likes_num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="点赞数" align="center" v-if="formThead.on_course">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.like_num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="播放量" align="center" v-if="formThead.on_course">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.distance}}</span>
        </template>
      </el-table-column>

      <el-table-column label="分享量" align="center" v-if="formThead.on_course">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.share_num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="线索量" align="center" v-if="formThead.on_course">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span>{{row.access_num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="视频" align="center" v-if="formThead.video">
        <template class="block" slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <div :style="{backgroundImage:'url('+row.head_img+')'}" class="image1">
            <i class="el-icon-video-play" style="font-size:50px" @click="openvideo(row.video_url)"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="审核状态" align="center">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <span v-if="row.status === 0 && formThead.to_audit" style="color: #409EFF">未审核</span>
          <span v-else-if="row.status === 1 && formThead.through" style="color: #2ac06d">审核通过</span>
          <span v-else-if="row.status === 2 && formThead.not_through" style="color: red">审核不通过</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}" v-if="row.to_audit!='hide'||row.through!='hide'||row.not_through!='hide'">
          <el-button type="primary" @click="opendetail(row)">管理</el-button>
          <el-dialog
          align="left"
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>短视频介绍:{{detail}}</span><br/>
          <span>上架课程:{{subjects}}</span><br/>
          <span>上架福利:{{welfare}}</span><br/>
          <span style="text-align:center">作品:
            <div :style="{backgroundImage:'url('+head_img+')'}" class="image1">
              <i class="el-icon-video-play" style="font-size:50px" @click="openvideo(row.video_url)"></i>
            </div>
          </span><br/>
          <span slot="footer" class="dialog-footer">
              <el-button type="danger" @click="delvideo(video_id)">删除</el-button>
              <el-button type="success" @click="modify(video_id,1)">审核通过</el-button>
              <el-button type="warning" @click="modify(video_id,2)">审核不通过</el-button>
          </span>
          </el-dialog>
        </template>
      </el-table-column>
      <el-dialog
        width="30%"
        title="视频"
        :visible.sync="dialogVisible1"
        append-to-body
        :before-close="videohandleClose">
        <video id="myVideo" width='100%' controls>
          <source :src="video['url']" :type='video.type'>
        </video>
      </el-dialog>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.listQuery.pagesize"
        :hide-on-single-page="show"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.listQuery.total">
      </el-pagination>
    </div>
  </div>

  
</template>

<script>
  import store from '@/store'
  import datepicker from './datepicke'
  import 'element-ui/lib/theme-chalk/index.css'
  import {del,getlist,upd,find_setting} from '@/api/thk/ashortvideo'



  export default {
    name: 'Ashortvideo',
    components: {
      datepicker
    },
    data() {
      return {
        // save storeList field
        show:true,
        videoList: [],
        bigImageSrc: null,
        dialogVisible: false,
        dialogVisible1:false,
        customerList: [],
        storeList: [],
        detail:"",
        formThead: {
          user:true,
          shop:true,
          upload_time:true,
          course_subjects:true,
          default_like:true,
          on_course:true,
          shelves_box:true,
          video:true,
          to_audit:true,
          not_through:true,
          through:true
        },

        listQuery: {
          name: undefined,
          detail:undefined,
          time: null,
          page: 1,
          pagesize: 10
        },

        loading: true,
        total: 0,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        value1: '',
        value2:'',

        detail: '',
        subjects:'',
        welfare:'',
        head_img:'',
        video:{type:'',url:''},
        video_id:undefined,
        video_show:[]
      }
    },
    inject: ['reload'],
    // created生命周期中调用获取活动列表方法
    created() {
      console.log(this.listQuery,"7777777777777777777777")
        this.getvideoList()
        this.loading=false
    },

    updated() {
      // this.getvideoList()
      this.$nextTick(function(){
        this.loading = false
      })
    },

    methods: {
      find_setting(index){
        find_setting(store.getters.token,index).then(res=>{
          console.log(res)
          this.$message({
            type:'success',
            message: res.data.msg
          });
        })
      },
      tableRowClassName(row,index){
        // console.log(row.row,"789456123")
        if(row.row.status === 0||row.row.status === 1||row.row.status===2){
          console.log(row,"789456123")
          return 'hidden-row';
        }
        return '';
      },
      newtime(num){
        return new Date(num*1000).toLocaleString();
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = parseInt(val)
        this.getvideoList()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.listQuery.page = parseInt(val)
        this.getvideoList()
      },
      searchActivity(){
        this.getname()
        console.log("getname执行了")
        this.gettimes(this.$refs.datepicker123.value1)
        console.log("gettimes执行了")
        console.log(this.listQuery.time)
        this.getvideoList()
        console.log("getvideoList执行了")
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
      },
      videohandleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          this.reload()
          done();
        })
        .catch(_ => {this.reload()});
        let videos=document.getElementById("myVideo")
        videos.pause()
        this.video={type:'',url:''}
      },
      opendetail(detail){
        
      },
      Changestate(id,type,status,index){
        
      },
      opendetail(item){
        this.dialogVisible=true
        this.detail=item.video_detail
        this.subjects=item.activity_title
        this.welfare=item.gift_activity_title
        this.head_img=item.head_img
        this.video=item.video_url
        this.video_id=item.id
      },
      openvideo(item){
        this.dialogVisible1=true
        this.video.type='video/mp4'
        this.video.url=item
        // console.log(this.video)
      },
      delvideo(id){
        const token= store.getters.token
        this.dialogVisible=false
        del(token,id).then(res=>{
          this.$message({
            type:'success',
            message: res.data.msg
          });
          console.log(res,"delvideo")
          this.searchActivity()
        })
      },
      getvideoList(){
        const token=store.getters.token
        console.log(token)
        getlist(token,this.listQuery.name,this.listQuery.time,this.listQuery.page,this.listQuery.pagesize).then(res=>{
          const ress=res.data.data.data
          console.log(res,"+++++++++++++++")
          this.listQuery.total=parseInt(res.data.data.total)
          this.listQuery.page=parseInt(res.data.data.current_page)
          this.listQuery.pagesize=parseInt(res.data.data.per_page)
          console.log(this.listQuery,"6666666666")
          console.log("video",ress)
          for(let i=0;i<ress.length;i++){
            ress[i].time=this.newtime(ress[i].create_time)
            if(ress[i].status===0){
              ress[i].to_audit=true
              ress[i].through='hide'
              ress[i].not_through='hide'
            }else if(ress[i].status===1){
              ress[i].to_audit='hide'
              ress[i].through=true
              ress[i].not_through='hide'
            }else{
              ress[i].to_audit='hide'
              ress[i].through='hide'
              ress[i].not_through=true
            }
          }
          if(this.listQuery.time!=null){
            this.videoList=ress.filter(item=>{
              if(item.time.match(this.listQuery.time)){
                return item
              }
            })
          }else{
            this.videoList=ress
            // console.log(this.videoList)
            this.show=false
          }
        })
      },
      modify(id,status){
        this.dialogVisible = false
        const token = store.getters.token
        upd(token,id,status).then(res=>{
          this.$message({
            type:'success',
            message: res.data.msg
          });
          this.searchActivity()
        })
      },
      gettimes(shijian){
        this.listQuery.time=''
        if(shijian!=''){
          const time=new Date(shijian)
          let oo=parseInt(time.getMonth())+1
          let day=parseInt(time.getDate())
          let dateof=String(time.getFullYear()+"/"+oo+"/"+day)
          this.listQuery.time=dateof
          console.log(this.listQuery.time)
        }
      },
      getname(){
        this.listQuery.name=this.value2
      },
      ooo(index){
        if(this.formThead[index]){
          for(let i=0;i<this.video_show.length;i++){
            if(this.videoList[this.video_show[i]][index]==='hide'){
              this.videoList[this.video_show[i]][index]=true
              console.log(this.videoList[this.video_show[i]])
              if(i===this.video_show.length-1){
                this.video_show=[]
              }
            }
          }
        }else{
          for(let i=0;i<this.videoList.length;i++){
            if(this.videoList[i][index]===true){
              this.videoList[i][index]='hide'
              console.log(this.videoList[i],"执行的我")
              this.video_show.push(i)
              console.log(this.video_show)
            }
          }
        }
      }
    },
  }
</script>

<style scoped>
.image1{
  /* width: 100px;
  height: 200px; */
  background-repeat:no-repeat;
	background-size:100% 100%;
  -moz-background-size:100% 100%;
  color:black
}
.image1:hover{
  color:white
}
</style>

